<template>
	<div class="head h_box"><img src="../../assets/images/carsmall.jpg" class="goodImg flex_1">
      <div class="goodInfo flex_1">
        <p>物流状态:<span>运输中</span></p>
        <p>物流公司:<span>申通快递</span></p>
        <p>运单编号:<span>33128943808</span></p>
        <p>官方电话:<span>95543</span></p>
      </div>
    </div>
    <div class="cross"></div>
    <div class="order_container">
      <h1>数据由XXX提供</h1>	
      <ul class="flex_1">
        <li class="line active">
          <label>【上海市】申通公司 长宁区 已收件</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line">
          <label>【上海市】快件已到达 上海</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line">
          <label>【上海市】申通快递 上海普陀公司收件员  已揽件</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line">
          <label>您的订单待配货</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line">
          <label>您的订单开始处理</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line">
          <label>【上海市】申通快递 上海普陀公司收件员  已揽件</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
        <li class="line last">
          <label>您的订单待配货</label>
          <div class="time">2016-09-17 18:55:12</div>
        </li>
      </ul>
    </div>
 
</template>

<style lang="scss" scoped>
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';

.h_box{display:-webkit-box;display:flex;width:100%;}
.flex_1{-webkit-box-flex:1;box-flex:1;}
.head{
	padding: rem(15) rem(15);
	background: $_fff;
	.goodImg{
		display: inline-block;
		width: rem(70);
		height: rem(70);
		border: 1px solid #ccc;
		margin-right: rem(10);
	}
	.goodInfo{
		p{
			font-size: rem(13);
			line-height: rem(19);
			color: $_999 
		}
		p:first-child{
			color: $_333;
			span{
				color:#25ae5f;
			}
		}
		span{
			margin-left: rem(9);
		}
	}
}
.cross{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	height: rem(15);
	background: $_eee;
}
.order_container{
	background: $_fff;
	h1{
		height: rem(44);
		line-height: rem(44);
		font-size: rem(14);
		color:#000; 
		border-bottom: 1px solid $_eee;
		padding-left: rem(15);
		width:100%;  
	}
	ul.flex_1{
		padding: 0 rem(35) 0 rem(15);
		margin: rem(12) 0 0 rem(15);
		width:100%;
	}
	.line{
		margin-bottom: rem(10); 
		line-height: 1;
		position: relative;
		font-size: rem(13);
		padding-left: rem(15); 
		color:$_999;
		label{
			display: block;
			margin-bottom: rem(10);
			line-height: rem(20); 
		}
		.time{
			padding-bottom: rem(10);
			border-bottom: 1px solid $_eee;
		}
		&:before{
			content: "";
			position: absolute;
			width: rem(10);
			height: rem(10);
			border-radius: 50%;
			background: #ccc;
			left: -1.02rem;
			top: 0.39rem;
		}
		&:after{
			width: 1px;
			background: #e8e8e8;
			height: 100%;
			position: absolute;
			content: "";
			left: -.554rem;
			top:1.4rem;
		}
	}
	.last{
		&:after{
			width: 0px;
		}
	}
	.active{
		label{
			color: #000;
		}
		&:before{
			width: rem(10);
			height: rem(10);
			border: rem(2) solid #b9e5cc;;
			background:#25ae5f;
			left: -1.2rem;
			z-index: 1;
			top: 0.3rem;
		}
	}
}

</style>	